<template>
	<div class="block">
		<div class="list">
			<div class="item" v-for="item in list" :key="item.name">
				<p>
					<span>{{ item.value }}</span>
					<span>{{ item.unit }}</span>
				</p>
				<p>{{ item.name }}</p>
			</div>
		</div>
		<component
			:is="pieChart"
			:chartData="chartOptions"
			unit="%"
		/>
	</div>
</template>

<script setup>
import { computed, defineEmits, onMounted, reactive, ref, defineProps } from 'vue'
import pieChart from './pieChart'
import { gdjsbt } from '@/service/village'

const props = defineProps({
	date: {
		type: Object,
		default: () => []
	}
})

const emits = defineEmits('toPage')

const list = ref([
	{
		name: '安装警示牌房屋栋数',
		value: 0,
		res: 'xggdjsbpds',
		unit: '栋'
	},
	{
		name: '安装率',
		value: 0,
		res: 'azl',
		unit: '%'
	}
])

const chartData = reactive([
	{ name: '已安装', value: 0 },
	{ name: '未安装', value: 0 },
])


const chartOptions = computed(() => {
	return chartData.value
})

const getData = async () => {
	const result = await gdjsbt({
		date: props.date
	})
	chartData.value = result?.data?.tb
	Object.keys(result?.data?.msg)?.forEach(key => {
		list.value?.map(item => {
			if (item.res === key) item.value = result?.data?.msg?.[key]
		})
	})
}

const onClick = () => {
	emits('toPage', 'statistics-gdjsbp')
}

onMounted(() => {
	getData()
})
</script>

<style scoped lang="less">
.block {
	.list {
		display: flex;
		margin: 24px 24px 0;
		gap: 32px;
		.item {
			background: #F6F6F6;
			flex: 1;
			height: 98px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			p {
				height: 40px;
				line-height: 40px;
				font-size: 24px;
				&:nth-of-type(1) {
					span {
						&:nth-of-type(1) {
							font-size: 40px;
							font-weight: 600;
							color: var(--van-primary-color);
							margin-right: 6px;
						}
					}
				}
				&:nth-of-type(2) {
					color: #B9B9B9;
				}
			}
		}
	}
	:deep(.pie-chart) {
		height: 360px;
	}
}
</style>
